<template>
    <div class="agent-content">
        <div class="agent-header">
            <div class="agent-header-content">
                <div class="agent-title">
                    绿通云智慧驾校PaaS平台· <span>代理招募计划</span>
                </div>
                <div class="agent-desc">资源互补，合作共赢</div>
                <div class="agent-subtitle">让我们携手为客户提供优质驾培服务！</div>
            </div>
        </div>
        <div class="businessPlan">
            <div class="w1200">
                <div class="businessPlan-title">您的专属 Business Plan</div>
                <div class="businessPlan-desc">我们提供两种商业合作模式，您可根据实际情况灵活选择！</div>
                <div class="flex flex-justify-center">
                    <div class="businessPlan-apply" @click="showConsult = true">合作申请</div>
                </div>
                <div class="businessPlan-cards">
                    <div class="plan-card">
                        <div class="plan-card-header">
                            <img class="plan-card-img"
                                src="https://image.lutongjiakao.com/system/de3ed4b4a4414e61bb21fbccf1002f94.png"
                                alt="" />
                        </div>
                        <div>
                            <div class="plan-card-title">个人代理</div>
                            <div class="plan-card-desc">为个人代理商提供专有注册链接，直接绑定用户</div>
                            <ul class="plan-card-list">
                                <li>无需承担成本投入，支持低门槛代理</li>
                                <li>按代理实际成交量结算，灵活高效</li>
                                <li>实时享受平台优惠政策和活动</li>
                                <li>操作简单安全，支持在线签约及分成</li>
                            </ul>
                        </div>
                    </div>
                    <div class="plan-card">
                        <div class="plan-card-header">
                            <img class="plan-card-img"
                                src="https://image.lutongjiakao.com/system/783668d631b74ad0b3a5a0019a39fe1e.png"
                                alt="政企合作" />
                        </div>
                        <div>
                            <div class="plan-card-title">企业合作</div>
                            <div class="plan-card-desc">为政企代理商提供专属CRM渠道后台，实现战略合作</div>
                            <ul class="plan-card-list">
                                <li>为企业/政府定制专属合作政策，按年/季度/项目结算</li>
                                <li>支持定制化服务及资源对接，提供专属客户经理服务</li>
                                <li>可开具增值税专用发票，支持合同签约</li>
                                <li>合作企业资质：认证度高（企业、政府、事业）</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="advantage">
            <div class="w1200">
                <div class="advantage-title">
                    合作优势
                </div>
                <div class="advantage-desc">
                    互利共赢的供应商协作体系，为驾校提供高效的数字化转型，与您共谋行业发展
                </div>
                <div class="advantage-card">
                    <div class="advantage-item" v-for="value in advantageList">
                        <div class="advantage-icon">
                            <img :src="value.icon" alt="">
                        </div>
                        <div class="card-title">
                            {{ value.title }}
                        </div>
                        <div v-for="item in value.desc" class="card-desc">
                            {{ item }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="marketSupport">
            <div class="w1200">
                <div class="marketSupport-title">市场支持</div>
                <div class="marketSupport-subtitle">全方位市场支持、全力配合、共同成就</div>
                <div class="marketSupport-grid">
                    <div class="marketSupport-item" v-for="item in marketList" :key="item.line1">
                        <div class="advantage-icon">
                            <img :src="item.icon" alt="" />
                        </div>
                        <div class="marketSupport-text">
                            <div>{{ item.line1 }}</div>
                            <div>{{ item.line2 }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="marketing">
            <div class="w1200">
                <div class="marketing-title">营销支持</div>
                <div class="marketing-subtitle">全方位营销支持，多渠道获取资源</div>
                <div class="marketing-grid">
                    <div class="marketing-item" v-for="m in marketingList" :key="m.title">
                        <div class="marketing-icon">
                            <img :src="m.icon" alt="" />
                        </div>
                        <div class="marketing-item-title">{{ m.title }}</div>
                        <div class="marketing-item-desc">{{ m.desc }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ctaBanner">
            <div class="w1200">
                <div class="ctaBanner-title">支持更多合作化服务，立即申请，进一步讨论合作细节</div>
                <div class="flex flex-justify-center">
                    <div class="ctaBanner-btn" @click="showConsult = true">合作申请</div>
                </div>
            </div>
        </div>
        <consult v-if="showConsult" @close="showConsult = false" />
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import consult from '@/components/consult.vue';

const showConsult = ref(false);

const advantageList = ref([{
    icon: 'https://image.lutongjiakao.com/system/0b60a95efa114b00a83419bb8c054295.png',
    title: '丰厚激励',
    desc: ['激励体系', '高续费比例带来稳定营收', '季/年度优秀代理商激励']
}, {
    icon: 'https://image.lutongjiakao.com/system/6432862ea33f460e9476b92cac535769.png',
    title: '体系化培训',
    desc: ['定期线上产品培训', '定期线下训练营', '渠道经理定期走访辅导']
}, {
    icon: 'https://image.lutongjiakao.com/system/5137903c60e44e71a652d3a9d4369584.png',
    title: '市场支持',
    desc: ['产品画册、四折页等物料', '专属授权服务商挂牌', '拓客话术等销售资料']
}, {
    icon: 'https://image.lutongjiakao.com/system/f5ea04528bdb4390b8db557e2a70ce16.png',
    title: '服务支持',
    desc: ['7*12小时在线人工客服', '专属代理商服务沟通群', '专属客户沟通服务群']
}])

const marketList = ref([
    {
        icon: 'https://image.lutongjiakao.com/system/2912940c17814dfe8ca6d61e86e9db87.png',
        line1: '商业资源共享',
        line2: '信息互联互通'
    },
    {
        icon: 'https://image.lutongjiakao.com/system/833b29034f87432f80f7b7590b308acc.png',
        line1: '市场活动',
        line2: '营销推广/人力配备'
    },
    {
        icon: 'https://image.lutongjiakao.com/system/fa8eaa04be114be0b8d7eb0b3513b67f.png',
        line1: '建立组织保障',
        line2: '培训计划落地'
    },
    {
        icon: 'https://image.lutongjiakao.com/system/cc014fd12ec648ff82ea024131e98e26.png',
        line1: '统一对接窗口',
        line2: '提供一对一服务'
    },
    {
        icon: 'https://image.lutongjiakao.com/system/62747fa239d4442e8af9c7a173f5b72d.png',
        line1: '提供售前',
        line2: '售后人员培训支持'
    }
])

const marketingList = ref([
    {
        icon: 'https://image.lutongjiakao.com/system/c4935c7260594f19b26d25d6f964662f.png',
        title: '品牌认可',
        desc: '品牌活动、媒体广告、市场推广'
    },
    {
        icon: 'https://image.lutongjiakao.com/system/06c88e05eaa942feb15a2c1c715ded22.png',
        title: '产品认可',
        desc: '技术壁垒、自研协议、专属认证'
    },
    {
        icon: 'https://image.lutongjiakao.com/system/ca27542c0e74488a9073c80af139959d.png',
        title: '客户公关',
        desc: '客户答谢会、品牌展示、公共支持'
    }
])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.agent-header {
    height: rem(360);
    background-image: url('https://image.lutongjiakao.com/system/d934e2c62b554f319a32ee4179ecad11.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: rem(50);
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.agent-header-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.agent-title {
    font-size: rem(36);
    color: #fff;
    font-weight: bold;
    margin-bottom: rem(10);

    span {
        color: rgb(10, 188, 84);
    }
}

.agent-desc {
    font-size: rem(28);
    font-weight: bold;
    margin-bottom: rem(10);
    color: #fff;
}

.agent-subtitle {
    color: #fff;
    font-size: rem(12);
}

.businessPlan {
    background: rgb(242, 251, 247);
    height: rem(502.5);
    padding: rem(60) 0 rem(75);
}

.businessPlan-title {
    text-align: center;
    font-size: rem(30);
    color: #000;
    font-weight: 700;
}

.businessPlan-desc {
    text-align: center;
    font-size: rem(14);
    margin: rem(10) 0 rem(20);
    font-weight: 400;
    color: rgb(102, 102, 102);
    line-height: 1;
}

.businessPlan-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    width: rem(223.5);
    height: rem(28.5);
    color: rgb(10, 188, 84);
    border: 2px solid rgb(10, 188, 84);
    border-radius: rem(20);
    font-size: rem(15);
    cursor: pointer;
}

/* Cards */
.businessPlan-cards {
    display: flex;
    gap: rem(20);
    margin-top: rem(30);
}

.plan-card {
    flex: 1;
    background: #fff;
    border-radius: rem(12);
    padding: rem(20);
    box-shadow: 0 8px 24px rgba(10, 188, 84, 0.08);
    display: flex;
    gap: rem(20);
}

.plan-card-header {
    display: flex;
    gap: rem(14);
}

.plan-card-img {
    width: rem(75);
    height: rem(105);
}

.plan-card-title {
    font-size: rem(22);
    font-weight: bold;
    color: #111;
    margin: rem(6) 0;
}

.plan-card-desc {
    font-size: rem(13);
    color: rgb(102, 102, 102);
    line-height: 1.6;
    margin-bottom: rem(15);
}

.plan-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: rem(5);
}

.plan-card-list li {
    position: relative;
    font-size: rem(11);
    color: rgb(102, 102, 102);
    line-height: 1.8;
}

.plan-card-list li::before {
    content: '';
    display: inline-block;
    width: rem(13.5);
    height: rem(10);
    background-image: url('https://image.lutongjiakao.com/system/7d8194138dc1480081d7946c2c268ad1.png');
    background-repeat: no-repeat;
    margin-right: rem(8);
}

.advantage {
    padding: rem(60) 0 rem(80);
}

.advantage-title {
    color: rgb(34, 34, 34);
    font-size: rem(30);
    font-weight: bold;
    text-align: center;
    margin-bottom: rem(10);
}

.advantage-desc {
    text-align: center;
    font-weight: 400;
    color: rgb(102, 102, 102);
    font-size: rem(14);
    margin-bottom: rem(30);
}

.advantage-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: rem(20);
}

.advantage-item {
    background-color: rgb(242, 251, 247);
    border-radius: rem(13);
    padding: rem(25) rem(20);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.advantage-icon {
    width: rem(63);
    height: rem(63);

    img {
        width: 100%;
        height: 100%;
    }
}

.card-title {
    font-size: rem(18);
    color: rgb(34, 34, 34);
    margin: rem(15) 0px rem(15);
}

.card-desc {
    font-size: rem(12);
    font-weight: 400;
    color: rgb(102, 102, 102);
    line-height: 26px;
}

/* Market Support */
.marketSupport {
    background: rgb(246, 253, 250);
    padding: rem(60) 0 rem(80);
}

.marketSupport-title {
    text-align: center;
    font-size: rem(30);
    color: #000;
    font-weight: 700;
}

.marketSupport-subtitle {
    text-align: center;
    font-size: rem(14);
    color: rgb(102, 102, 102);
    margin-top: rem(8);
}

.marketSupport-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: rem(40);
    margin-top: rem(40);
}

.marketSupport-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.marketSupport-text {
    color: rgb(34, 34, 34);
    font-size: rem(14);
    line-height: 1.8;
}

/* Marketing */
.marketing {
    padding: rem(60) 0 rem(80);
}

.marketing-title {
    text-align: center;
    font-size: rem(30);
    font-weight: 700;
    color: #000;
}

.marketing-subtitle {
    text-align: center;
    font-size: rem(14);
    color: rgb(102, 102, 102);
    margin-top: rem(8);
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: rem(60);
    margin-top: rem(40);
}

.marketing-item {
    text-align: center;
}

.marketing-icon {
    width: rem(90);
    height: rem(90);
    margin: 0 auto rem(12);

    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.marketing-item-title {
    font-size: rem(18);
    color: rgb(34, 34, 34);
    margin-top: rem(6);
}

.marketing-item-desc {
    font-size: rem(12);
    color: rgb(102, 102, 102);
    margin-top: rem(6);
}

/* CTA Banner */
.ctaBanner {
    background: radial-gradient(100% 711.11% at 100% 13.51%, rgb(17, 200, 178) 0%, rgb(17, 200, 113) 100%);
    padding: rem(45) 0 rem(50);
}

.ctaBanner-title {
    color: #fff;
    text-align: center;
    font-size: rem(30);
    margin-bottom: rem(20);
}

.ctaBanner-btn {
    background: #fff;
    color: rgb(10, 188, 84);
    border: none;
    border-radius: rem(24);
    padding: rem(5) rem(34);
    font-size: rem(14);
    cursor: pointer;
}
</style>